<template>
  <div style="height: 60px;width: 1500px"></div>
  <div class="comment_div">
    <div v-for="item in informArr" class="comment_text"
         style="height: 100px;text-align: left;padding: 40px;border-bottom: #dcdcdc solid 1px">
      <el-row :gutter="20">
        <el-col :span="2">
          <el-avatar :size="50" :src="item.avatar"/>
        </el-col>
        <el-col :span="22">
          <h3 style="margin-top: -10px">{{ item.nickname }}</h3>
          <p>{{ item.informCommentContent }}</p>
          <a :href="'/detail?id='+item.informArticleId">
            <p style="font-size: 20px;color: darkgray;margin-top: -7px">| {{ item.title }}</p>
          </a>
          <p style="font-size: 14px;color: darkgray;">
            {{ item.createTime }}
<!--            <el-icon>-->
<!--              <ChatDotRound/>-->
<!--            </el-icon>-->
<!--            回复-->
          </p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {onBeforeUpdate, onMounted, ref} from "vue";
import tokenAxios from "@/http/request/TokenAxios";

const user = ref(getUser());
const informArr = ref([]);

const getAllInform = () => {
  tokenAxios.get(BASE_URL + ':49282/inform/1/All').then((response) => {
    if (response.state === 20000) {
      informArr.value = response.data;
    }
  })
}

const updateInformNotNew = () => {
  tokenAxios.post(BASE_URL + ':49282/inform/1/update').then((response) => {
    if (response.state === 20000){
      informArr.value = response.data;
    }
  })
}

onMounted(() => {
  getAllInform();
  updateInformNotNew();
})
</script>

<style scoped>
a {
  text-decoration: none;
  color: #000;
  display: block;
}

.comment_text:hover {
  background-color: rgb(248, 248, 248);
}

.comment_div {
  padding: 20px;
  width: 1200px;
  margin: 0 auto;
  background-color: white;
  overflow-x: hidden;
  overflow-y: scroll;
}

.comment_div::-webkit-scrollbar {
  display: none;
}

</style>